<template>
    <div class="design-item">
        <div class="design-item-controller">
            <div class="design-item-controller-handle">
                <div class="design-component-line-preview">
                    <div class="wrap-line" :style="{margin: '0px '+ (hasMargin==0? '0px' :'10px' )}">
                        <hr v-bind:style="currentStyle">
                    </div>
                </div>
            </div>
            <slot name="menu"></slot>
        </div>
        <div class="design-item-editor" v-show="show && !showAddMenuGroup">
            <div>
                <div class="design-item-editor-title">辅助线</div>
                <div class="editor-group">
                    <div class="editor-group-label">颜色：</div>
                    <div class="editor-group-control">
                         <el-color-picker v-model="color" @active-change="changeColor"></el-color-picker>
                    </div>
                </div>
                
                <div class="editor-group">
                    <div class="editor-group-label">高度：</div>
                    <div class="editor-group-control">
                        <el-input-number v-model="height" 
                        	controls-position="right" 
                        	@change="changeHeight" 
                        	size="mini"
                        	:min="1" :max="10">
                        </el-input-number>
                    </div>
                </div>                
                
                <div class="editor-group">
                    <div class="editor-group-label">边距：</div>
                    <div class="editor-group-control">
					  <el-radio v-model="hasMargin" label="0" @change="changeMargin">无边距</el-radio>
					  <el-radio v-model="hasMargin" label="10" @change="changeMargin">左右留边</el-radio>
                    </div>
                </div>
                <div class="editor-group">
                    <div class="editor-group-label ">样式：</div>
                    <div class="editor-group-control">
					  <el-radio v-model="lineType" label="solid" @change="changeLine">实线</el-radio>
					  <el-radio v-model="lineType" label="dashed" @change="changeLine">虚线</el-radio>
					  <el-radio v-model="lineType" label="datted" @change="changeLine">点线</el-radio>
                    </div>
                </div>
            </div>
        </div>
        <slot name="addMenuGroup" v-if="showAddMenuGroup"></slot>
    </div>
</template>
<script>
    export default {
        name: "nc-design-item-line",
        otherInfo: {
            title: '辅助线',
            type: 'line',
            group: 2,
            max: 0
        },
        //外部传入参数
        props: {
            show: {
                type: Boolean,
                default: false
            },
            options: {
                type: Object,
                default: null
            },
            cid: {
                type: Number
            },
            showAddMenuGroup: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
		        //颜色
		        color: '#E5E5E5',
		        // 是否有边框
		        hasMargin: '0',
		        // 样式
		        lineType: 'solid',		        
		        height: '1'
            }
        },
        computed: {
            currentStyle() {
                return {
                    borderTop: `1px ${this.lineType} ${this.color}`,
                    color:this.color,
                    height:`${this.height}px`,
                    background:this.color
                }
            }
        },
        methods: {
        	// 改变颜色
        	changeColor(res){this.color=res},
        	// 是否有边框改变函数
        	changeMargin(res){
        		this.hasMargin=res
        	},
        	// 改变线条的样式 （点 虚线 实线）
        	changeLine(res){
        		this.lineType=res
        	},
        	// 改变高度
        	changeHeight(res){
        		this.height=res
        	},
           
            // 获取当前数据           
            getCurrentData() {
                return {
                    color: this.color,
                    hasMargin: this.hasMargin,
                    lineType: this.lineType,
                    height: this.height,
                    type:'line'
                }
            }
        }
    };
</script>